<template>
	<view class="w-100">
		<template v-if="!loadingState">
			<view class="flex-1 row" style="height: 500px;">
				<image :src="loadingImg" style="width: 100rpx;height: 100rpx;" mode=""></image>
			</view>
		</template>
		<template v-else>
			<view class="flex-1 py-3 bg-white mt">
				<view class="flex-1 mx-3 font-s-35">
					<view class="flex-1 mt-1">
						<view class="pro-item flex-1 row-ac mb-3" v-for="item in proList" :key="item.id">
							<view class="pro-img">
								<image :src="item.product.image_list[0].url" mode=""></image>
							</view>
							<view class="pro-info flex-1 ml-2">
								<view class="font-s-35 font-w flex-1 mr-2 in1line">{{ item.product.product_name }}
								</view>
								<view class="font-s-2 flex-1 mr-2 in1line mt-1 text-light-grey pro-spec"
									v-if="item.spec">
									{{ item.spec }}
								</view>
								<view class="mt-2 flex-1 row-ac">
									<view class="flex-1 font-s-4 font-w"><text
											class="font-s-2">￥</text>{{ item.product.price }}</view>
									<view class="font-s-35 font-w-500">共 {{ item.quantity }} 件</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="flex-1 py-3 row-ac border mx-3 mt-5 font-s-4" v-if="reportStatus !== true">
					<view class="row-ac flex-1 ml-2">
						<view>我的现金券：</view>
						<view class="mr-1 font-w">{{ personalreport.coupon_amount_total  }}</view>
						<view class="iconfont icon-bangzhu ml-4" style="font-size: 40rpx;"></view>
					</view>
					<view class="row-ac">
						<view class="font-s-3 text-main-color">可用现金券{{ usableCoupon }}元</view>
						<switch :checked="false" :disabled="seleStatus" color="#FF0000" style="transform:scale(0.8)"
							@change="changeChecked" @click="onChecked" />
					</view>
				</view>
				<view class="mt-8 flex-1 row-ac justify-end mr-3 font-s-45 font-w">商品总价：￥{{ orderDetail.order_amount }}
				</view>
				<view class="mt-2 flex-1 row-ac justify-end mr-3 font-s-45 font-w text-main-color"
					v-if="reportStatus !== true && openCouponTatus ==true">
					折后总价：￥{{ finalOrderAmount | numFilter}}
				</view>
			</view>
			<view class="flex-1 mt bg-white py-3 row-ac" v-if="userIdentity.identity == 5">
				<view class="flex-1 row-ac">
					<view class="flex-1 row" v-for="(item,index) in selector" :key="index"
						:class="{ active: selectIndex == index }" @click="takeSelect(index)">
						<view class="select-box row">
							<view class="select-circle"></view>
							<view class="select-name">{{ item.name }}</view>
						</view>
					</view>
				</view>
				<view class="iconfont icon-bangzhu2 mr-4" @click="clickHellp"></view>
			</view>
			<view class="flex-1 pt-5 pb-3 bg-white">
				<view class="flex-1 mx-3 row-ac-sb mb-4">
					<view class="font-s-4 text-light-grey">默认地址</view>
					<view class="font-s-3 text-muted address-manage" @click="addressManage">选择地址</view>
				</view>
				<view class="flex-1 mx-4 row-ac mb-3">
					<view class="font-s-4 title-box">收货人:</view>
					<view class="flex-1 py-2 border-bottom">
						<input type="text" placeholder="收货人姓名" v-model="fromUserReport.consignee" value=""
							class="flex-1 px-2" />
					</view>
				</view>
				<view class="flex-1 mx-4 row-ac mb-3">
					<view class="font-s-4 title-box">联系方式:</view>
					<view class="flex-1 py-2 border-bottom">
						<input type="text" placeholder="联系方式" v-model="fromUserReport.phone" value=""
							class="flex-1 px-2" />
					</view>
				</view>
				<view class="flex-1 mx-4 row-ac mb-3">
					<view class="flex-1 row-ac">
						<view class="row-ac flex-1">
							<view class="font-s-4 title-box">收货地址:</view>
							<view class="flex-1 py-2 border-bottom mr-3">
								<view class="flex-1 py-1">{{address_info}}</view>
							</view>
						</view>
						<view class="font-s-3 text-light-grey" @click="reportAddress">选择</view>
					</view>

				</view>
				<view class="flex-1 mx-4 row-ac mb-3">
					<view class="font-s-4 title-box">详细地址:</view>
					<view class="flex-1 py-2 border-bottom">
						<input type="text" placeholder="详细地址" v-model="fromUserReport.address" value=""
							class="flex-1 px-2" />
					</view>
				</view>
			</view>
			<view class="flex-1" style="height: 180rpx;"></view>
			<view class="flex-1 fixed-bottom mb-6 row" v-if="reportStatus !== true">
				<view class="flex-1 mx-5 take-report row" @click="toReport">立即报单</view>
			</view>
			<leson-popup ref="lesonDialog" :popupStatu="lesonpopup" @statusChanged="handleStatusChanged">
				<view class="flex-1 py-3 popup-box">
					<view class="flex-1 mx-3 row-ac-sb popup-chang">
						<view class="font-s-35 font-w" @click="navTo('/pages/user/address')">地址管理</view>
						<view class="font-s-35 font-w" @click="navTo('/pages/user/editaddress')">添加地址</view>
					</view>
					<template v-if="manageStatus">
						<scroll-view scroll-y="true" class="flex-1" style="height: 1080rpx;"
							@scrolltolower="scrolltolower">
							<view class="flex-1 mx-3 address-item d-f border p-2 mb-3"
								v-for="(item,index) in addressList" :key="index">
								<view class="flex-1 ml-2 mr-5">
									<view class="font-s-35"><text
											class="mr-1 text-light-grey">地址:</text>{{ item.province_name }}{{ item.city_name }}{{ item.district_name }}{{ item.detail }}
									</view>
									<view class="font-s-35 mt-1"><text
											class="mr-1 text-light-grey">收货人:</text>{{ item.name }}
									</view>
									<view class="font-s-35 mt-1"><text
											class="mr-1 text-light-grey">联系电话:</text>{{ item.mobile }}
									</view>
								</view>
								<view class="default-box-1 row font-s-35" @click="selectAddress(item)">选择</view>
							</view>
						</scroll-view>
					</template>
				</view>
			</leson-popup>
			<view class="report-hellp-box" v-if="hellpStatus == true">
				<view class="report-hellp row">
					<view class="hellp-info-box">
						<view class="flex-1 py-3 row font-s-5 font-w">关于报单类型</view>
						<view class="flex-1 mx-4">
							<view class="flex-1 font-s-35 pb-2"><text class="font-w">平台单：</text>正常平台报单，平台发货的订单</view>
							<view class="flex-1 font-s-35 py-2"><text class="font-w">自营单：</text>由分公司自行发货的订单，不用上交货款。
							</view>
							<view class="flex-1 font-s-35 py-2"><text class="font-w">代发单：</text>在平台报单，由平台代分公司发货的订单
							</view>
						</view>
						<view class="iconfont icon-guanbi" @click="hellpStatus = false"></view>
					</view>
				</view>
			</view>
			<leson-popup ref="lesonaddDialog" :popupStatu="lesonaddpopup" @statusChanged="addStatusChanged">
				<view class="flex-1 py-3 mx-5">
					<view class="flex-1 row-ac justify-end" @click="cloesaddPopup">
						<view class="determine-box row font-s-35">确定</view>
					</view>
					<view class="flex-1 row-ac font-s-35 pt-2">
						<view class="text-muted mr-1">选择:</view>
						<view>
							<text>{{ take_province }}</text><text class="ml-1">{{ take_city }}</text><text
								class="ml-1">{{ take_district }}</text>
						</view>
					</view>
					<view class="flex-1 py-3">
						<view class="flex-1 row-ac text-muted">
							<view class="flex-1">省</view>
							<view class="flex-1 row">市</view>
							<view class="flex-1 row-ac justify-end">区/县</view>
						</view>
					</view>
					<view class="flex-1 d-f pb-2">
						<view class="flex-1" style="height: 800rpx;">
							<scroll-view scroll-y class="flex-1" style="height: 800rpx;"
								@scrolltolower="provinceTolower">
								<view class="flex-1 address-item mb-4" v-for="(item,index) in provinceList" :key="index"
									@click="takeProvince(item, index)">
									<view class="province-name font-s-35"
										:class="provinceIndex == index ? 'text-dark font-w' : 'text-muted'">
										{{ item.name }}
									</view>
								</view>
							</scroll-view>
						</view>
						<view class="flex-1" style="height: 800rpx;">
							<scroll-view scroll-y class="flex-1" style="height: 800rpx;">
								<view class="flex-1 address-item mb-4 row" v-for="(item,index) in cityList" :key="index"
									@click="takeCity(item, index)">
									<view class="province-name font-s-35"
										:class="cityIndex == index ? 'text-dark font-w' : 'text-muted'">{{ item.name }}
									</view>
								</view>
							</scroll-view>
						</view>
						<view class="flex-1" style="height: 800rpx;">
							<scroll-view scroll-y class="flex-1" style="height: 800rpx;">
								<view class="flex-1 address-item mb-4 row-ac justify-end"
									v-for="(item,index) in districtList" :key="index"
									@click="takeDistrict(item, index)">
									<view class="province-name font-s-35"
										:class="districtIndex == index ? 'text-dark font-w' : 'text-muted'">
										{{ item.name }}
									</view>
								</view>
							</scroll-view>
						</view>
					</view>
				</view>
			</leson-popup>
		</template>
	</view>
</template>
<script>
	import lesonPopup from "@/components/leson-popup"
	import {
		orderDetailUrl,
		addressListUrl,
		orderPatchUrl,
		addressDetailUrl,
		invoiceListUrl,
		invoiceDetailUrl,
		userInfoUrl,
		commonareaListUrl,
		orderreportPatchUrl,
		useridentityDetailUrl,
		distributorsDetailUrl,
		personalreportUrl
	} from '@/api/index.js'
	export default {
		components: {
			lesonPopup
		},
		data() {
			return {
				loginStatus: false,
				loadingState: false,
				loadingImg: '../../static/img/loading.gif',
				hellpStatus: false,
				getOrderId: '',
				reportStatus: false,
				lesonpopup: false,
				lesonaddpopup: false,
				manageStatus: true,
				userIdentity: '',
				proList: [],
				orderDetail: '',
				selectIndex: 0,
				selector: [{
						id: 0,
						name: '平台单'
					},
					{
						id: 1,
						name: '自营单'
					},
					{
						id: 2,
						name: '代发单'
					}
				],
				areaQueryInfo: {
					parent_id: 0,
					page_size: 10
				},
				areaList: [],
				addressQueryInfo: {
					is_default: 1,
				},
				queryInfo: {
					page_size: 10
				},
				addressList: [],
				addressTotal: '',
				addressDetail: '',
				address_info: '',
				payIndex: 0,
				fromUserReport: {
					is_report: true,
					is_paid: false,
					payment_method: 3,
					shipping_method: 0,
					order_amount: 0,
					discount: 0,
					province: '',
					city: '',
					district: '',
					address: '',
					phone: '',
					consignee: '',
					openCouponTatus: false

				},
				distributorsDetail: '',
				seleStatus: false,
				openCouponTatus: false,
				personalreport: {
					coupon_amount_total: 0
				},
				usableCoupon: 0,
				finalOrderAmount: 0,
				areaQueryInfo: {
					parent_id: 0,
					page_size: 35
				},
				provinceIndex: 0,
				provinceList: [],
				provinceTotal: 0,
				take_province: '',
				take_city: '',
				take_district: '',
				cityIndex: 0,
				cityList: [],
				cityTotal: 0,
				districtIndex: 0,
				districtList: [],
				districtTotal: 0
			}
		},
		filters: {
			phoneFilter(val) {
				let reg = /^(.{3}).*(.{4})$/;
				return val.replace(reg, "$1****$2");
			},
			numFilter(value) {
				let realVal = parseFloat(value).toFixed(2);
				return realVal;
			}
		},
		onLoad(options) {
			this.getOrderId = options.orderId
			this.init()
			setTimeout(() => {
				this.loadingState = true;
			}, 2500);
		},
		onShow() {
			this.init()
		},
		created() {
			this.getDistributorsDetail()
		},
		watch: {
			take_province: function(newVal, oldVal) {
				this.updateAddressInfo();
			},
			take_city: function(newVal, oldVal) {
				this.updateAddressInfo();
			},
			take_district: function(newVal, oldVal) {
				this.updateAddressInfo();
			}
		},
		methods: {
			init() {
				this.token = uni.getStorageSync('token')
				if (this.token != '') {
					this.loginStatus = true
					this.getUserInfo()
					this.getOrderDetail()
					this.getAddressList()

				} else {
					this.loginStatus = false
				}
				this.getCommonareaList()
			},
			updateAddressInfo() {
				this.address_info = this.take_province + this.take_city + this.take_district;
				console.log('9900', this.address_info);
			},

			getUserInfo() {
				this.$R.get(userInfoUrl).then(res => {
					this.userInfo = res.data
				})
			},
			getDistributorsDetail() {
				this.$R.get(distributorsDetailUrl).then(res => {
					this.distributorsDetail = res.data
					console.log('打印看看', this.distributorsDetail);
				})
			},
			getOrderDetail() {
				this.$R.get(orderDetailUrl + this.getOrderId + '/').then(res => {
					if (res.code == 200) {
						this.orderDetail = res.data
						this.proList = res.data.items
						if (this.orderDetail.is_report == true) {
							this.reportStatus = true
							this.addressDetail = {
								name: this.orderDetail.consignee,
								mobile: this.orderDetail.phone,
								detail: this.orderDetail.address,
								province_name: this.orderDetail.province_name,
								city_name: this.orderDetail.city_name,
								district_name: this.orderDetail.district_name
							}
							this.address_info = this.addressDetail.province_name + this.addressDetail
								.city_name +
								this.addressDetail.district_name
						} else {
							this.reportStatus = false
							this.fromUserReport.shipping_method = 0
						}
						this.getDefaultAddressList()
						this.getUserIdentity()
					}
				})

			},
			getUserIdentity() {
				this.$R.get(useridentityDetailUrl).then(res => {
					this.userIdentity = res.data
					this.getPersonalreport()
				})
			},
			getPersonalreport() {
				this.$R.get(personalreportUrl).then(res => {
					this.personalreport = res.data
					const couponAmount = this.personalreport.coupon_amount_total;
					const orderAmount = this.orderDetail.order_amount;
					// 计算可用的现金券金额
					if (orderAmount > 100 && this.userIdentity.identity == 1 && couponAmount > 0) {
						const maxCoupon = Math.floor(orderAmount / 100) * 10; // 每100元订单金额可使用10元现金券
						this.usableCoupon = Math.min(maxCoupon, couponAmount);
						this.seleStatus = false;
						this.finalOrderAmount = orderAmount - this.usableCoupon;
					} else {
						this.usableCoupon = 0;
						this.seleStatus = true;
						this.finalOrderAmount = orderAmount
					}
				})
			},
			getDefaultAddressList() {
				if (this.reportStatus == false) {
					this.$R.get(addressListUrl, this.addressQueryInfo).then(res => {
						if (res.code == 200) {
							if (res.data.list.length > 0) {
								this.addressDetail = res.data.list[0]
								this.address_info = this.addressDetail.province_name + this.addressDetail
									.city_name +
									this.addressDetail.district_name
								this.fromUserReport = {
									province: this.addressDetail.province,
									city: this.addressDetail.city,
									district: this.addressDetail.district,
									address: this.addressDetail.detail,
									phone: this.addressDetail.mobile,
									consignee: this.addressDetail.name,
								}
							}
						}
					})
				}
			},
			getAddressList() {
				this.$R.get(addressListUrl, this.queryInfo).then(res => {
					if (res.code == 200) {
						this.addressList = res.data.list
						this.addressTotal = res.data.total
					}
				})
			},
			scrolltolower() {
				// 触底事件
				if (this.addressTotal != this.addressList.length) {
					this.queryInfo.page_size += 10;
					this.getAddressList()
				}
			},
			changeChecked(e) {
				this.openCouponTatus = e.detail.value
			},
			onChecked() {
				const orderAmount = this.orderDetail.order_amount;
				const couponAmount = this.personalreport.coupon_amount_total;
				if (this.seleStatus) {
					uni.showToast({
						title: '现金券不能和用户身份折扣同时使用',
						icon: 'none'
					});
					return;
				}

				if (orderAmount < 100) {
					uni.showToast({
						title: '消费满100元以上才能使用现金券',
						icon: 'none'
					});
					return;
				}
				if (couponAmount == 0) {
					uni.showToast({
						title: '您的现金券为0，无法使用现金券',
						icon: 'none'
					});
					return;
				}
			},
			getCommonareaList() {
				this.$R.get(commonareaListUrl, this.areaQueryInfo).then(res => {
					if (res.code == 200) {
						this.areaList = res.data.list
					}
				})
			},
			toReport() {
				if (this.fromUserReport.province == '' && this.fromUserReport.city == '' && this.fromUserReport
					.district == '' && this.fromUserReport.address == '' && this.fromUserReport.phone == '' && this
					.fromUserReport.consignee == '') {
					uni.showToast({
						title: '请添加收货地址',
						icon: 'none'
					});
				} else {
					uni.showModal({
						title: '提示',
						content: '您报单成功后，您需向您的上级' + this.distributorsDetail.payment_superior_info.nickname + '上交货款，是否继续报单？',
						confirmText: '确认报单',
						success: (res) => { // 使用箭头函数
							if (res.confirm) {
								this.fromUserReport.is_report = true
								this.fromUserReport.payment_method = 3
								this.fromUserReport.order_amount = this.finalOrderAmount
								if (this.openCouponTatus == true) {
									this.fromUserReport.order_amount = this.finalOrderAmount
									this.fromUserReport.discount = this.usableCoupon
									console.log('打印的这里', this.fromUserReport.order_amount);
								} else {
									this.fromUserReport.order_amount = this.orderDetail.order_amount
									this.fromUserReport.discount = 0
									console.log('看看这个', this.fromUserReport.order_amount);
								}
								this.fromUserReport.openCouponTatus = this.openCouponTatus
								this.$R.patch(orderreportPatchUrl + this.getOrderId + '/', this
									.fromUserReport).then(res => {
									if (res.code == 200) {
										uni.showToast({
											title: '报单成功'
										});
										uni.navigateTo({
											url: '/pages/order/report-success?orderId=' +
												this.getOrderId
										});
									}
								})
							} else if (res.cancel) {
								uni.showToast({
									title: '取消报单',
									icon: 'none'
								});
							}
						}
					});
				}
			},
			takeSelect(index) {
				this.selectIndex = index
				if (this.selectIndex == 0) {
					this.fromUserReport.shipping_method = 0
				} else if (this.selectIndex == 1) {
					this.fromUserReport.shipping_method = 1
				} else if (this.selectIndex == 2) {
					this.fromUserReport.shipping_method = 2
				}
			},
			handleStatusChanged(newVal) {
				this.lesonpopup = newVal
			},
			addStatusChanged(newVal) {
				this.lesonaddpopup = newVal
			},
			addressManage() {
				this.lesonpopup = true
				this.manageStatus = true
			},
			increaseAddress() {
				this.manageStatus = false
			},
			cloesPopup() {
				this.$refs.lesonDialog.close()
			},
			cloesaddPopup() {
				this.$refs.lesonaddDialog.close()
			},
			selectAddress(item) {
				this.address_info = item.province_name + item.city_name + item.district_name
				this.addressDetail = item
				this.fromUserReport = {
					province: item.province,
					city: item.city,
					district: item.district,
					address: item.detail,
					phone: item.mobile,
					consignee: this.addressDetail.name,
				}
				this.cloesPopup()
			},
			navTo(url) {
				uni.navigateTo({
					url: url,
				});
			},
			clickHellp() {
				this.hellpStatus = true
			},
			reportAddress() {
				this.lesonaddpopup = true
				this.getProvinceareaList()
			},
			getProvinceareaList() {
				this.$R.get(commonareaListUrl, this.areaQueryInfo).then(res => {
					if (res.code == 200) {
						this.provinceList = res.data.list
						this.provinceTotal = res.data.total
						this.areaQueryInfo.parent_id = this.provinceList[0].id
						this.fromUserReport.province = this.provinceList[0].id
						this.getCityareaList()
					}
				})
			},

			getCityareaList() {
				this.$R.get(commonareaListUrl, this.areaQueryInfo).then(res => {
					if (res.code == 200) {
						this.cityList = res.data.list
						this.take_city = this.cityList[0].name
						this.areaQueryInfo.parent_id = this.cityList[0].id
						this.fromUserReport.city = this.cityList[0].id
						this.cityTotal = res.data.total
						this.getDistrictareaList()
					}
				})
			},
			getDistrictareaList() {
				this.$R.get(commonareaListUrl, this.areaQueryInfo).then(res => {
					if (res.code == 200) {
						this.districtList = res.data.list
						this.take_district = this.districtList[0].name
						this.areaQueryInfo.parent_id = this.districtList[0].id
						this.fromUserReport.district = this.districtList[0].id
						this.districtTotal = res.data.total
					}
				})
			},
			provinceTolower(e) {
				if (e.detail.direction == 'bottom') {
					if (this.provinceTotal != this.provinceList.length) {
						this.areaQueryInfo.page_size++;
						this.getCommonareaList()
					}
				}
			},
			takeProvince(item, index) {
				this.provinceIndex = index
				this.take_province = item.name
				this.areaQueryInfo.parent_id = item.id
				this.fromUserReport.province = item.id
				console.log('选择省份', this.fromUserReport.province);
				this.getCityareaList()
			},
			takeCity(item, index) {
				this.cityIndex = index
				this.take_city = item.name
				this.areaQueryInfo.parent_id = item.id
				this.fromUserReport.city = item.id
				console.log('选择城市', this.fromUserReport.city);
				this.getDistrictareaList()
			},
			takeDistrict(item, index) {
				this.districtIndex = index
				this.take_district = item.name
				this.fromUserReport.district = item.id
				console.log('选择区', this.fromUserReport.district);
			},

		}
	};
</script>
<style lang="scss">
	page {
		background-color: #f5f5f5;
	}

	.icon-weixinzhifu2 {
		color: #2f9c3a;
	}

	.pro-item {
		height: 138rpx;

		.pro-img {
			width: 138rpx;
			height: 138rpx;
		}

		.pro-info {
			height: 138rpx;

			.pro-spec {
				height: 32rpx;
			}
		}
	}


	.take-report {
		height: 92rpx;
		border-bottom: 1rpx solid #000;
		background-color: #000;
		color: #fff;
	}

	.select-box {
		width: 180rpx;
		height: 58rpx;
		background-color: #fff;

		.select-circle {
			width: 28rpx;
			height: 28rpx;
			border-radius: 50%;
			margin-right: 13rpx;

			border: 1rpx solid #9D9D9D;
		}

		.select-name {
			color: #A4A4A4;
		}
	}

	.active .select-box {
		background-color: #f5f5f5;
	}

	.active .select-circle {
		border: 1rpx solid #9D9D9D;
		background-color: #000;
	}

	.active .select-name {
		color: #000;
	}

	.title-box {
		width: 160rpx;
	}

	.address-manage {
		padding: 8rpx 12rpx;
		border: 1rpx solid #9D9D9D;
	}

	.default-box {
		width: 160rpx;
		height: 46rpx;
		border: #000;
		color: #000;
	}

	.default-box-1 {
		width: 100rpx;
		height: 46rpx;
		border: 1rpx solid #9D9D9D;
		color: #9D9D9D;
	}

	.check-box {
		width: 28rpx;
		height: 28rpx;
		border: 1rpx solid #9D9D9D;
		border-radius: 50%;
	}

	.check-statu {
		background-color: #000;
	}

	.popup-box {
		height: 1200rpx;

		.popup-chang {
			height: 120rpx;
		}
	}

	.icon-bangzhu2 {
		font-size: 48rpx;
	}

	.report-hellp-box {
		position: fixed;
		top: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.7);
		z-index: 999;

		.report-hellp {
			width: 100%;
			height: 100%;


			.hellp-info-box {
				width: 568rpx;
				height: 528rpx;
				background-color: #fff;
				position: relative;
			}

			.icon-guanbi {
				position: absolute;
				right: 20rpx;
				top: 20rpx;
				font-size: 52rpx;
			}
		}
	}

	.determine-box {
		width: 120rpx;
		height: 52rpx;
		border: 1rpx solid #000;
		color: #000;
	}
</style>